<template>
	<view class="my-bill-detail">
	
		<view class="mb-section">
			<view class="bill-info">
				<image class="b-pic"
					:src="orderInfo.productInfo.image">
				</image>
				<view class="spec-info">
					<view class="title m-ellipsis">{{orderInfo.productInfo.store_name}}</view>
					<view class="sub">已选择：{{orderInfo.bill.lease_way}}；{{orderInfo.productInfo.attrInfo.suk}}；1件</view>
					<view class="sub mt8">总租金：¥{{orderInfo.rent_price}}</view>
					<view class="sub mt8">意外险：¥{{orderInfo.broker_screen_insurance}}</view>
				</view>
			</view>
		</view>
		
		<view style="padding: 0 20rpx;">
			
			<view class="first-title">
				<view class="left">首期待付金额</view>
				<view class="right">¥{{orderInfo.bill.first_stage_price}}</view>
			</view>
		
			<view class="list-wrapper">
				<view class="list-title">
					<view class="title-item">租期</view>
					<view style="width: 1px;height: 72rpx;background: #F5F7FA;"></view>
					<view class="title-item">租金</view>
				</view>
			
				<view v-for="(item, index) in orderInfo.bill.list" class="item">
					<view class="left">
						<view>第{{item.stage}}期</view>
						<view style="margin-top: 8rpx;">{{item.end_time}}</view>
					</view>
					<view style="width: 1px;height: 100%;background: #F5F7FA;"></view>
					<view class="right">
						¥{{item.stage_price}}
					</view>
				</view>
			</view>
		
		</view>
		
		
		<view style="height: 300rpx;"></view>
		
	</view>
</template>

<script>
	import couponListWindow from '@/components/couponListWindow';
	import {
		getOrderDetail,
		getStageBillList,
	} from '@/api/order.js';
	export default {
		components: {
			couponListWindow	
		},
		data() {
			return {
				rentInfo: {},
				orderInfo: {},
				order_id: '',
				o_id: '',
				orerInfo: {},
				wait_list: [],
			};
		},
		onLoad(options) {
			const that = this
			const orderInfo = uni.getStorageSync('confirmOrder')
			that.$set(that, 'orderInfo', orderInfo);
		},
		onReady() {
			// this.getServerData();
		},
		methods: {
			// getServerData() {
			//     const that = this
			// 	getOrderDetail(this.order_id).then(res => {
			// 		that.$set(that, 'orderInfo', res.data);
			// 	})
			// 	getStageBillList(this.o_id).then(res => {
			// 		that.$set(that, 'rentInfo', res.data);
			// 		that.opts.title.name = res.data.rent_price;
			// 		that.wait_list = that.rentInfo.wait_list
			// 	})
			// },
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.my-bill-detail {
		.rent-info {
			width: 100%;
			height: 184rpx;
			display: flex;
			align-items: center;
			
			.h-line {
				width: 2rpx;
				height: 72px;
				background: #F5F5F5;
			}
			
			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				.name {
					font-weight: 500;
					color: #1F1F1F;
					font-size: 32rpx;
				}
				
				.txt {
					margin-top: 24rpx;
					font-weight: 500;
					color: #999999;
				}
			}
		}

		.mb-section {
			padding: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;
		}

		.order-id {
			height: 96rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			border-bottom: 2rpx solid #f5f5f5;
			color: #1F1F1F;
			
			.num {
				color: #999;
			}
		}

		.bill-info {
			display: flex;
			margin-top: 24rpx;
			padding-bottom: 32rpx;

			.b-pic {
				width: 240rpx;
				height: 240rpx;
				border-radius: 16rpx;
				border: 2rpx solid #F5F5F5;
			}

			.spec-info {
				flex: 1;
				margin-left: 24rpx;

				.title {
					margin-bottom: 16rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #1F1F1F;
					line-height: 48rpx;
				}

				.sub {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;

					&.mt8 {
						margin-top: 8rpx;
					}
				}
			}
		}

		.p-title {
			margin-top: 8rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #1F1F1F;
			line-height: 32rpx;
		}
		
		
		.top-box {
			margin-top: 32rpx;
			display: flex;
			align-items: center;
			
			.left {
				flex: 1;
				
				.sub-title {
					font-size: 24rpx;
					color: #1F1F1F;
					line-height: 24rpx;
				}
				
				.sum {
					margin-top: 16rpx;
					font-size: 56rpx;
					font-weight: bold;
					color: #1F1F1F;
					line-height: 56rpx;
				}
			}
			
			.to-pay {
				width: 176rpx;
				height: 76rpx;
				line-height: 76rpx;
				border-radius: 44rpx;
				border: 2rpx solid #39CCC2;
				font-size: 28rpx;
				font-weight: bold;
				color: #39CCC2;
				text-align: center;
			}
		}
		
		.note {
			padding-bottom: 32rpx;
			margin-top: 16rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			border-bottom: 2rpx solid #F5F5F5;
		}
	
		.data-list {
			.item {
				padding:  24rpx 0;
				
				&~.item {
					border-top: 2rpx solid #F5F5F5;
				}
				
				.content {
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 144rpx;
					
					.left {
						height: 144rpx;
						width: 72rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-right: 10rpx;
					}
					
					.middle {
						flex: 1;
						
						.count {
							font-size: 28rpx;
							font-weight: bold;
							color: #1F1F1F;
						}
						
						.time {
							margin-top: 24rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
							line-height: 24rpx;
							
							.red {
								color: #FF271F;
							}
							
							.green {
								color: #16B86C;
							}
						}
					}
					
					.right {
						text-align: right;
						.num {
							font-size: 36rpx;
						}
						.money-add {
							margin-top: 20rpx;
							color: #999;
							font-size: 24rpx;
						}
					}
				}
				
				
				
				
				.stage {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					
					text {
						font-size: 28rpx;
						font-weight: bold;
						color: #1F1F1F;
					}
					
					.num {
						font-size: 36rpx;
					}
				}
			
				.info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 24rpx;
					
					.time {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 24rpx;
						
						.red {
							color: #FF271F;
						}
						
						.green {
							color: #16B86C;
						}
					}
					
					.price {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
	
		.mb-flex-box {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 2;
			width: 100%;
			background-color: #fff;
			padding-bottom: 48rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			// justify-content: space-between;
			
			.coupon-list {
				width: 100%;
				height: 96rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;
				
				
				.name {
					color: #1F1F1F;
					font-size: 32rpx;
					font-weight: bold;
				}
				
				.num {
					padding: 4rpx;
					font-size: 24rpx;
					color: #FF1F2E;
					background: rgba(255,31,46,0.08);
				}
			}
			
			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 680rpx;
				height: 76rpx;
				border-radius: 44rpx;
				font-size: 28rpx;
				font-weight: bold;
				
				&.prev {
					color: #39CCC2;
					background: rgba(57,204,194,0.08);
				}
				
				&.next {
					color: #fff;
					background: linear-gradient(90deg, #71EBDA 0%, #39CCC2 100%);
				}
			}
		}
	}
	
	.first-title {
		background: #FFFFFF;
		border: 1px solid #F5F7FA;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-weight: 500;
		
		.left {
			color: #1F1F1F;
		}
		
		.right {
			color: #FF1F2E;
		}
	}
	
	.list-wrapper {
		border-radius: 16rpx;
		border: 1px solid #F5F7FA;
		margin-top: 32rpx;
		
		.list-title {
			display: flex;
			flex-direction: row;
			background: #FAFAFA;
			
			.title-item {
				flex: 1;
				height: 72rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #1F1F1F;
			}
		}
		
		.item {
			height: 128rpx;
			border-top: 1px solid #F5F7FA;
			display: flex;
			flex-direction: row;
			
			.left {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #1F1F1F;
			}
			
			.right {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #1F1F1F;
			}
			
		}
	}
	
	
	
</style>